<template>
  <div class="header">
   <div class="header-left">
     <span class="iconfont ">&#xe624;</span>
   </div>
    <div class="header-input"><span class="iconfont ">&#xe632;</span>输入景点/城市/游玩主题</div>
    <router-link to='/city'>
     <div class="header-right">{{this.city}}
       <span class="iconfont arrow-icon ">&#xe64a;</span>

     </div>
    </router-link>
  </div>
  <!--
    啊里的图标库使用
    iconfont的使用
  -->
</template>

<script>
import  {mapState} from 'vuex'
export default {
  name: "Header",
  computed:{
    ...mapState(['city'])
  }

};
</script>
<style lang="stylus" scoped>
/*
 scoped 让里面的样式只在该组件才有效果
下面引入CSS文件 @号记得写。 ~号后面接简写的标识
*/
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.header {
  display: flex;
  line-height: $headerHeight;
  color #fff;
  background-color $bgColor;
  .header-left {
    width: 0.64rem;
    float: left;
    text-align center;

}
    .header-input {
      flex: 1;
      background #fff;
      border-radius .1rem;
      margin-top .12rem;
      height .64rem;
      margin-left .2rem;
      color #ccc;
      line-height .64rem;
      padding-left 0.2rem;
    }

    .header-right {
      //  ellipsis();
      //写min-width 可以限制宽度最小。 可以自适应
      min-width: 1.04rem;
      padding-left:.1rem;
      text-align center;
      float: right;
      color #fff;
      .arrow-icon{
        font-size .24rem;
      }
    }

}
</style>



